
<template>
    <div>
        <router-link to="/EngineeringReplacementTeam" style="float: right">
            <el-button type="danger" icon="close" size="mini" class="bolder outsideBtnBS"></el-button>
        </router-link>
        <div class="block" style="margin-bottom: 10px">
            <span class="wrapper">
                <el-button type="danger" size="mini" :disabled="saveDisabled" class="bolder outsideBtnBS selectAll" @click="saveEReplace(false)" style="margin-left:0!important;" v-text="nowLangue.save"><!--保存--></el-button>
                <el-button type="danger" size="mini" :disabled="saveDisabled" class="bolder outsideBtnBS selectAll" @click="saveEReplace(true)" v-text="nowLangue.confirm"><!--确定--></el-button>
            </span>
        </div>
        <el-form :inline="true" :model="createPlan" ref="createPlan" style="border-bottom:1px solid #ccc;">
            <!--创建人-->
            <el-form-item :label="nowLangue.creator">
                <el-input v-model="createPlan.creater" disabled size="mini"></el-input>
            </el-form-item>
            <!--创建时间-->
            <el-form-item :label="nowLangue.createTime">
                <el-input v-model="createPlan.createTime" size="mini" disabled></el-input>
            </el-form-item>
            <!--备件小类-->
            <el-form-item :label="nowLangue.spareSmallClass" class="selectMB10" prop="categoryCode" :rules="[{ required: true, message: nowLangue.pleaseSelect}]">
                <el-select size="mini" @change="changeSubClass" :placeholder="nowLangue.pleaseSelect" v-model="createPlan.categoryCode">
                    <el-option v-for="(subClass,index) in spareClassList" :key="index" :label="subClass.name" :value="subClass.code"></el-option>
                </el-select>
            </el-form-item>
            <!--工程替换组编码-->
            <el-form-item :label="nowLangue.productReplaceGroupCode" class="selectMB10">
                <el-input size="mini" disabled v-model="createPlan.code"></el-input>
            </el-form-item>
            <!--工程替换组名称-->
            <el-form-item :label="nowLangue.productReplaceGroupName" class="selectMB10" prop="name" :rules="[{ required: true, message: nowLangue.pleaseImport}]">
                <el-input v-model="createPlan.name" :placeholder="nowLangue.pleaseImport + nowLangue.productReplaceGroupName"></el-input>
            </el-form-item>
        </el-form>
        <label class="default-label" v-text="nowLangue.productReplaceGroupParm"><!--工程替换组参数：--></label>
        <!--工程替换组参数-->
        <el-table max-height="200" :data="engReplaceParmData" border style="width: 100%;" @selection-change="handleSelectedEngReplace">
            <!--序-->
            <el-table-column type="index" header-align="center" align="center" :label="nowLangue.sequence" class="indexWidth"></el-table-column>
            <!--操作-->
            <el-table-column type="selection" align="center" width="40"></el-table-column>
            <!--参数名-->
            <el-table-column prop="name" :label="nowLangue.parmName"  header-align="center" show-overflow-tooltip> </el-table-column>
            <!--参数值-->
            <el-table-column prop="propertyId" :label="nowLangue.parmValue" header-align="center" show-overflow-tooltip width="180">
                <template scope="scope">
                    <el-select size="mini" v-model="scope.row.propertyId" :placeholder="nowLangue.pleaseSelect">
                        <el-option v-for="(parm,index) in scope.row.projectsstClusterMaterialPropertyValueVoList" :key="index" :label="parm.value" :value="parm.id"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <!--参数单位-->
            <el-table-column prop="unit" :label="nowLangue.parmUnit" header-align="center" show-overflow-tooltip>
            </el-table-column>
        </el-table>
        <label class="default-label" v-text="nowLangue.spareDetail"><!--备件明细：--></label>
        <el-button class="bolder outsideBtnBS" size="mini" type="danger"  @click="add()" v-text="nowLangue.addSpare"><!--添加备件--></el-button>
        <!--备件明细-->
        <el-table max-height="200" :data="spareData" border style="width: 100%;">
            <!--序-->
            <el-table-column type="index" header-align="center" align="center" :label="nowLangue.sequence" width="40"></el-table-column>
            <!--操作-->
            <el-table-column :label="nowLangue.operate" header-align="center" align="center" width="60">
                <template scope="scope">
                    <div class="operationItem bolder" @click="deleteSpare(scope.$index)" v-text="nowLangue.delete"><!--删除--></div>
                </template>
            </el-table-column>
            <!--备件编码-->
            <el-table-column prop="materialCode" :label="nowLangue.spareCode" header-align="center"  show-overflow-tooltip></el-table-column>
            <!--备件名称-->
            <el-table-column prop="materialName" :label="nowLangue.spareName" header-align="center"  show-overflow-tooltip></el-table-column>
            <!--参数单位-->
            <el-table-column prop="" :label="nowLangue.parmUnit" header-align="center" align="right">
            </el-table-column>
        </el-table>
        <!--选择备件弹窗-->
        <el-dialog :title="nowLangue.selectSpare" :visible.sync="dialogFormVisible" @close="closeSpare">
            <el-form :model="chooseSpare" :inline="true">
                <!--备件编号-->
                <el-form-item :label="nowLangue.spareCode">
                    <el-input size="mini" v-model="chooseSpare.materialCode" auto-complete="off" :placeholder="nowLangue.pleaseImport + nowLangue.spareCode"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="danger" @click="querySpareList" class="bolder outsideBtnBS selectAll" :disabled="selectDisabled" size="mini" v-text="nowLangue.query"><!--查询--></el-button>
                    <el-button type="danger" @click="confirmSpareList" class="bolder outsideBtnBS" size="mini" v-text="nowLangue.confirm"><!--确定--></el-button>
                </el-form-item>
            </el-form>
            <el-table :data="spareListDate" border style="margin-top:16px;width: 100%;" v-loading.body="loading" :element-loading-text="nowLangue.isLoading" @selection-change="handleSelectedSpareList">
                <!--序-->
                <el-table-column type="index" header-align="center" align="center" :label="nowLangue.sequence" width="40"></el-table-column>
                <!--选择-->
                <el-table-column type="selection" align="center" width="40"></el-table-column>
                <!--备件编码-->
                <el-table-column prop="materialCode" :label="nowLangue.spareCode" header-align="center"  show-overflow-tooltip></el-table-column>
                <!--备件名称-->
                <el-table-column prop="materialName" :label="nowLangue.spareName" header-align="center"  show-overflow-tooltip></el-table-column>
            </el-table>
            <!--分页-->
            <el-pagination v-if="isPaging" @size-change="handleSizeChange" @current-change="handleCurrentChange"  :current-page.sync="currentPage3" :current-page="pageIndex"   :page-sizes="[5, 10, 15 , 20, 25]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :page-count="totalPage" :total="totalNumber"></el-pagination>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                language:{
                    zh:{
                        "save":"保存",
                        "confirm":"确定",
                        "productReplaceGroupCode":"工程替换组编码",
                        "productReplaceGroupName":"工程替换组名称",
                        "productReplaceGroupParm":"工程替换组参数",
                        "spareSmallClass":"备件小类",
                        "pleaseSelect":"请选择",
                        "pleaseImport":"请输入",
                        "creator":"创建人",
                        "createTime":"创建时间",
                        "parmName":"参数名",
                        "parmValue":"参数值",
                        "parmUnit":"参数单位",
                        "spareDetail":"备件明细",
                        "addSpare":"添加备件",
                        "delete":"删除",
                        "spareCode":"备件编码",
                        "spareName":"备件名称",
                        "select":"选择",
                        "isLoading":"正在拼命加载中",
                        "query":"查询",
                        "sequence":"序",
                        "operate":"操作",
                        "selectSpare":"选择备件"
                    },
                    en:{
                        "save":"save",
                        "confirm":"confirm",
                        "productReplaceGroupCode":"productReplaceGroupCode",
                        "productReplaceGroupName":"productReplaceGroupName",
                        "productReplaceGroupParm":"productReplaceGroupParm",
                        "spareSmallClass":"spareSmallClass",
                        "pleaseSelect":"pleaseSelect",
                        "pleaseImport":"pleaseImport",
                        "creator":"creator",
                        "createTime":"createTime",
                        "parmName":"parmName",
                        "parmValue":"parmValue",
                        "parmUnit":"parmUnit",
                        "spareDetail":"spareDetail",
                        "addSpare":"addSpare",
                        "delete":"delete",
                        "spareCode":"spareCode",
                        "spareName":"spareName",
                        "select":"select",
                        "isLoading":"isLoading",
                        "query":"query",
                        "sequence":"sequence",
                        "operate":"operate",
                        "selectSpare":"selectSpare"
                    }
                },
                nowLangue:{},
                // 查询表单
                createPlan:{
                    creater:"",
                    createTime:"",
                    code:"",
                    name:"",
                    categoryCode:"",
                    categoryName:"",
                    active:"",
                },
                engReplaceParmData:[],//工程替换组参数
                spareData:[],//备件明细
                selectSpareData:[],//备件弹窗选中得备件
                spareClassList:[],//备件小类集合
                projectsstClusterPropertyList:[],//参数值Id集合 用于传参

                saveDisabled:false,
                /*弹窗*/
                selectDisabled:false,
                dialogFormVisible:false,
                chooseSpare:{
                    materialCode:''
                },
                spareListDate:[],//弹窗列表
                // 分页
                loading:false,
                isPaging:true,    //是否显示分页
                pageIndex:1,    //当前页（必传）
                pageSize :10,   //每页多少条
                currentPage:1,    //当前显示3页
                currentPage3:3,
                totalNumber: 1,     //总条数
                totalPage:1,    //总页数
            };
        },
        created:function(){
            var _this=this;
            _this.languageType=="zh"?_this.nowLangue=_this.language.zh:_this.nowLangue=_this.language.en;
        },
        computed:{
            languageType(){
                return this.$store.state.languageType;
            }
        },
        watch:{
            languageType(){
                var _this=this;
                _this.languageType=="zh"?_this.nowLangue=_this.language.zh:_this.nowLangue=_this.language.en;
            }
        },
        //进入页面立即运行此方法
        mounted: function () {
            var _this = this;
            _this.$store.commit('currentActive', 'CreateEReplacementTeam');
            this.dropSpareList();
            this.queryOpera();
        },
        methods:{
            //备件小类查询
            dropSpareList(){
                var _this=this;
                $.ajax({
                    type:'GET',
                    url:_this.metadata_service+'subClass/findSubClassList',
                    cache:false,
                    dataType:'JSON',
                    contentType:"application/json;charset=utf-8",
                    success:function(data){
                        if(data.success){
                            _this.spareClassList=data.data;
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                    }
                })
            },
            changeSubClass(){
                if(this.createPlan.categoryCode=="" || this.createPlan.categoryCode==null){
                    this.engReplaceParmData=[];
                }else{
                    this.queryParm();//查询工程替换组参数
                }
                for(var i=0;i<this.spareClassList.length;i++){
                    if(this.createPlan.categoryCode==this.spareClassList[i].code){
                        this.createPlan.categoryName=this.spareClassList[i].name;
                    }
                }
            },
            //获取创建人员与创建时间
            queryOpera(){
                var _this=this;
                $.ajax({
                    type:'GET',
                    url:_this.metadata_service+'barCode/createInitParameter',
                    cache:false,
                    dataType:'JSON',
                    contentType:"application/json;charset=utf-8",
                    success:function(data){
                        if(data.success){
                            _this.createPlan.creater=data.data.personName;
                            _this.createPlan.createTime=data.data.operationTime;
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                    }
                })
            },
            //添加备件
            add(){
                if(this.createPlan.categoryCode!="" && this.createPlan.categoryCode!=null){
                    this.dialogFormVisible=true;
                    this.querySpareList();
                }else{
                    var errorMessage=this.languageType=="zh"?'请先选择备件小类！':'Please Select SpareClass';
                    this.common.errorTip(errorMessage);
                }
            },
            //查询工程替换组参数
            queryParm(){
                var _this=this;
                $.ajax({
                    type: 'GET',
                    url: _this.metadata_service+"substituteGroup/queryMaterialPropertyByCode?code="+_this.createPlan.categoryCode,
                    cache: false,
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        if (data.success) {
                            _this.engReplaceParmData=data.data;
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                    },
                    error:function(err){
                        _this.common.errorTip("Error");
                    }
                });
            },
            //选择工程替换组参数
            handleSelectedEngReplace(val){
                this.projectsstClusterPropertyList=[];
                for(var i=0;i<val.length;i++){
                    this.projectsstClusterPropertyList.push({
                        propertyValueId:val[i].id
                    })
                }
            },
            // 备件查询
            querySpareList(){
                var _this = this;
                this.loading=true;
                _this.selectDisabled=true;
                var tmp={
                    subClassCode:this.createPlan.categoryCode,
                    materialCode:this.chooseSpare.materialCode,
                    pageSize:this.pageSize,
                    pageIndex:this.pageIndex
                }
                $.ajax({
                    type: 'POST',
                    url: _this.metadata_service+"substituteGroup/queryMaterialList",
                    cache: false,
                    data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        if (data.success) {
                            _this.selectDisabled=false;
                            _this.loading=false;
                            _this.isPaging=true;
                            _this.totalPage=data.data.totalPage;
                            _this.totalNumber=data.data.totalNumber;
                            _this.spareListDate = data.data.dataList;
                        }else{
                            _this.loading=false;
                            _this.selectDisabled=false;
                            _this.common.errorTip(data.errorMessage);
                        }
                    }
                });
            },
            //选中备件操作
            handleSelectedSpareList(val){
                var _this = this;
                _this.selectSpareData=val;//选中得备件
            },
            //确定
            confirmSpareList(){
                this.dialogFormVisible=false;
                var reaptList=[];
                for(var i=0;i<this.selectSpareData.length;i++){
                    if(!this.isRepeat(this.selectSpareData[i].materialCode,this.spareData)){
                        this.spareData.push({
                            materialCode:this.selectSpareData[i].materialCode,
                            materialName:this.selectSpareData[i].materialName,
                        })
                    }else{
                        reaptList.push(this.selectSpareData[i].materialCode);
                    }
                }
                //已选提示
                if(reaptList.length>0){
                    var errorMessage=this.languageType=="zh"?'已选！':'Have Selected';
                    this.common.errorTip(reaptList.join(",")+errorMessage);
                }
            },
            //判断是否重复
            isRepeat(value,arr){
                for(var i=0;i<arr.length;i++){
                    if(value==arr[i].materialCode){
                        return true
                    }
                }
                return false
            },
            //关闭
            closeSpare(){
                this.loading=false;
            },
            //保存false  确定true  验证
            saveEReplace(parm){
                var _this=this;
                _this.$refs["createPlan"].validate((valid) => {
                    if (valid) {
                        //验证
                        if(_this.projectsstClusterPropertyList.length==0 || _this.spareData.length==0){
                            var errMessage=_this.languageType=="zh"?'工程替换组与参数映射数据不能为空！':'Have Empty';
                            _this.common.errorTip(errMessage);
                            return
                        }
                        for(var i=0;i<_this.projectsstClusterPropertyList.length;i++){
                            if(_this.projectsstClusterPropertyList[i].propertyId==""){
                                var errSelect=_this.languageType=="zh"?'选中行的参数值不允许为空！':'Have Empty';
                                _this.common.errorTip(errSelect);
                                return
                            }
                        }
                        _this.sendRequest(parm);//请求
                    } else {
                        var err=_this.languageType=="zh"?'存在未填写的必填项！':'Have Empty';
                        _this.common.errorTip(err);
                        return false;
                    }
                });
            },
            //保存、确定发请求
            sendRequest(parm){
                var _this=this;
                _this.saveDisabled=true;
                var tmp={
                    code: this.createPlan.code,
                    name: this.createPlan.name,
                    categoryCode: this.createPlan.categoryCode,
                    categoryName: this.createPlan.categoryName,
                    active: parm,
                    status:parm?20:10,
                    projectsstClusterPropertyList: this.projectsstClusterPropertyList,
                    projectsstClusterMaterialList:this.spareData
                }
                $.ajax({
                    type:'POST',
                    url:_this.metadata_service+'supplyCluster/addSubstituteGroup',
                    cache:false,
                    data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType:"application/json;charset=utf-8",
                    success:function(data){
                        _this.saveDisabled=false;
                        if(data.success){
                            var successMessage=_this.languageType=="zh"?'保存成功！':'Save Success';
                            _this.common.successTip(successMessage);
                            _this.createPlan.code=data.data.code;
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                    },
                    error:function(){
                        _this.saveDisabled=false;
                    }
                })
            },
            //删除
            deleteSpare(index){
                this.spareData.splice(index,1);
            },
            //分页
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.querySpareList();
            },
            //点击页码分页查询点击事件
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.pageIndex=val;
                this.querySpareList();
            }
        }
    }
</script>